<template>
  <div class="pay">
    <div class="money_group">
      <div class="money">
        <span class="num">{{this.money}}</span>
        <sub>元</sub>
      </div>
    </div>
    <div class="bottom_group">
      <button type="button" name="" class="w_submit" @click="submit">去支付</button>
    </div>
  </div>
</template>
<script type="text/babel">
  // import qs from 'qs'
  export default{
    name: 'pay',
    components: {
    },
    data () {
      return {
        money:0
      }
    },
    mounted:function(){

    },
    methods:{
      submit(){
        console.log("支付")
          var timestamp =  $("#timestamp").val();
          var noncestr =  $("#noncestr").val();
          var packageValue =  $("#packageValue").val();
          var sign =  $("#sign").val();
          var signature =  $("#signature").val();

          WeixinJSBridge.invoke(
            'getBrandWCPayRequest', {
               "appId":"wxcf53702f0700cb52",     //公众号名称，由商户传入
               "timeStamp":timestamp,         //时间戳，自1970年以来的秒数
               "nonceStr":noncestr, //随机串
               "package":packageValue,
               "signType":"MD5",         //微信签名方式：
               "paySign":sign //微信签名
            },
            function(res){
                if(res.err_msg == "get_brand_wcpay_request:ok" ) {

                }     // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。
            }
          );
      },
      getParams(){
        var url = "http://test.pay.gf.cloudns.asia:88/weixin/unifiedOrder.json";
        $.ajax({
            url: url,
            type: "get",
            data: {orderId:'1708011740168353074',payType:4,tradeType:'JSAPI',sourceFor:'h5'},
            dataType: 'json',
            success: function(result){
              if(result.code==200){
                var data = result.modelData;
                $("#timestamp").attr("value",data.timestamp);
                $("#noncestr").attr("value",data.noncestr);
                $("#packageValue").attr("value",data.packageValue);
                $("#sign").attr("value",data.sign);
                $("#signature").attr("value",data.signature);
              }else{

                alert(result.desc);
              }
            }
        });

      }
    }
  }

</script>

<style scoped>
  .money_group{
    font-family: AvantiBold;
    width:650px;
    margin:90px auto;
    border:solid red 1px;
    height:200px;
    line-height: 200px;
  }
  .money{
    font-size: 72px;
    color: #696969;
    text-align: center;
  }
  .num{}
  .money sub{
    font-size: 28px;
    color: #696969;
  }
  .bottom_group{
    position: fixed;
    left:0;right:0;
    bottom:0;
  }
  .w_submit{
    position:relative;
    font-size: 32px;
    border-radius: 50px;
    width:690px;
    height: 100px;line-height: 100px;
    margin:30px auto;
    display: block;
    text-align: center;
    padding-right:34px;
  }
  .w_submit:after{
    content:" ";
    width:15px;
    height:25px;
    display: block;
    background:url("../../static/image/icon_next.png") no-repeat;
    background-size: cover;
    position: absolute;
    top:50%;
    margin-top:-12.5px;
    right:280px;
    z-index: 99999;
    /*background:red;*/
  }
</style>
